<template>
	<view class="u-wrap">
		<view class="status"></view>
		<view class="nav">
			<view class="left" @click="toBack()">
				<image src="../../static/image/back.png" />
			</view>
			<view class="center">新增排班</view>
			<view class="right">
				<image src="../../static/image/7a6c14529f55e7906092a378d697bd4.png" />
			</view>
		</view>
		<view class="shift_one" @click="show1 = true">
			<view class="left">
				<view class="inlie">
					选择班次
				</view>
			</view>
			<view class="right">
				{{activeShift.name==null||activeShift.name=='undefind'||activeShift.name==''?'请选择':activeShift.name}}
				<u-action-sheet :actions="array" @select="selectClick1" :title="title1" :show="show1" @close="close1()">
				</u-action-sheet>

			</view>
		</view>
		<view class="shift_one" @click="DatePicker('range')">
			<view class="left">
				<view class="inlie">
					排班日程
				</view>
			</view>
			<view class="right">
				{{range[0]}} - {{range[1]}}
			</view>
		</view>
		<view class="shift_one" @click="show = true">
			<view class="left">
				<view class="inlie">
					执行人
				</view>
			</view>
			<view class="right">
				{{activeExecutor.phone==null||activeExecutor.phone=='undefind'||activeExecutor.phone==''?'请选择':activeExecutor.phone}}
				<u-action-sheet :actions="arrayPerson" @select="selectClick" :title="title" :show="show" @close="close()">
				</u-action-sheet>
			</view>
		</view>
		<!-- 	<view class="shift_one">
			<view class="left">
				<view class="inlie">
					考勤规则
				</view>
			</view>
			<view class="right">
			<picker @change="bindPickerChange" class="picker" :value="index" :range="array">
									<view class="uni-input">{{array[index]}}</view>
								</picker>
			</view>
		</view> -->

		<view class="addbank" @click="toAddScheduling()">
			提交
		</view>
		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'开始'"
			:end-text="'结束'" :show-seconds="true" @confirm="ed" @cancel="ed" />
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker,

		},
		data() {
			return {

				array: [],
				arrayPerson: [],
				showPicker: false,
				range: ['', ''],
				type: 'range',
				value: '',
				user: {},
				dqjs: '',
				mendian_id: '',
				activeShift: {}, //选中的班次
				activeExecutor: {}, //选中的执行人
				title: '选择执行人',
				title1: '选择班次',
				show: false,
				show1: false,



			}
		},
		onLoad() {
			let cur_time = this.getNowFormatDate();
			this.range[0] = cur_time;
			this.range[1] = cur_time;
			this.getShift();


		},
		onShow() {
			var that = this;
			uni.getStorage({
				key: 'user_key',
				complete: function(res) {
					// console.log(666,res)
					that.mendian_id = res.data.mendian
					that.dqjs = res.data.role
					that.getExecutor(res.data.mendian)
				}
			})

		},
		methods: {
			close(){
				this.show = false
			},
			close1(){
				this.show1 = false
			},
			selectClick1(index) {
				console.log(index)
				this.activeShift = index
				this.show1 = false
			},
			selectClick(index) {
				console.log(index)
				this.activeExecutor = index
				this.show = false
			},
			//获取门店信息
			getExecutor(mendian_id) {
				let _that = this;
				wx.request({
					url: getApp().globalData.url + '/client/GetMendxq',
					method: 'GET',
					data: {
						id: mendian_id
					},
					header: {
						"Content-Type": "application/json"
					},
					success: function(res) {
						if (res.data.code == 200 && res.data.msg == '查询成功') {
							_that.arrayPerson = res.data.data.yuangong
							console.log(999,_that.arrayPerson)
						} else {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "请求出现异常！"
							});
						}
					}
				})
			},
			//获取班次数据
			getShift() {
				let _that = this;
				wx.request({
					url: getApp().globalData.url + '/client/GetBclist',
					method: 'GET',
					data: {},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: function(res) {
						if (res.data.code == 200 && res.data.msg == '查询成功') {
							_that.array = res.data.data
						} else {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "请求出现异常！"
							});
						}
					}
				})
			},
			// 提交排班数据
			toAddScheduling() {
				let dataAll = [];
				dataAll = this.getDayAll(this.range[0], this.range[1]);
				console.log("yhid:"+this.activeExecutor.id)
				console.log("sbriq:"+dataAll)
				console.log("bcid:"+this.activeShift.id)
				// console.log("所有日期:" + dataAll)
				if(this.activeShift.id==''||this.activeShift.id=='undefind'||this.activeShift.id==null){
					uni.showToast({
						icon: 'none',
						position: 'center',
						title: "请选择班次"
					});
					return;
				}
				if(this.activeExecutor.id==''||this.activeExecutor.id=='undefind'||this.activeExecutor.id==null){
					uni.showToast({
						icon: 'none',
						position: 'center',
						title: "请选择执行人"
					});
					return;
				}
				uni.request({
					url: getApp().globalData.url + '/client/AddBaiban',
					method: 'POST',
					data: {
						yhid: this.activeExecutor.id,
						sbriq: dataAll,
						bcid: this.activeShift.id
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: function(res) {
						if (res.data.code == 200 && res.data.msg == '提交成功') {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "提交成功"
							});
						} else {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "请求出现异常！"
							});
						}
					}
				})


			},
			//获取两个日期之间的所有日期
			getDayAll(starDay, endDay) {

				var arr = [];
				var dates = [];

				// 设置两个日期UTC时间
				var db = new Date(starDay);
				var de = new Date(endDay);

				// 获取两个日期GTM时间
				var s = db.getTime() - 24 * 60 * 60 * 1000;
				var d = de.getTime() - 24 * 60 * 60 * 1000;

				// 获取到两个日期之间的每一天的毫秒数
				for (var i = s; i <= d;) {
					i = i + 24 * 60 * 60 * 1000;
					arr.push(parseInt(i))
				}

				// 获取每一天的时间  YY-MM-DD
				for (var j in arr) {
					var time = new Date(arr[j]);
					var year = time.getFullYear(time);
					var mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1));
					var day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate());
					var YYMMDD = year + '-' + mouth + '-' + day;
					dates.push(YYMMDD)
				}

				return dates
			},
			DatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			ed(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			},
			// bindPickerChange: function(e) {
			// 	console.log('picker发送选择改变，携带值为', e.target.value)
			// 	this.index = e.target.value
			// },
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getNowFormatDate() {
				var date = new Date();
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				return currentdate;
			}

		}
	}
</script>
<style>
	page {
		background: #F0F0F0;
		height: auto;
		min-height: 100%;
	}
</style>
<style scoped lang="scss">

	.u-wrap {
		text-align: center;
		align-items: center;
		padding-bottom: 280rpx;
		.status {
			height: var(--status-bar-height);
			background-color: #1BB68E;

		}

		.nav {
			display: flex;
			justify-content: space-between;
			height: 73rpx;
			background-color: #1BB68E;

			.left {
				width: 33%;
				height: 73rpx;
				text-align: left;
				align-items: center;

				image {
					width: 20rpx;
					height: 33rpx;
					margin-left: 29rpx;
					margin-top: 20rpx;

				}
			}

			.center {
				width: 33%;
				align-items: center;
				height: 73rpx;
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
				line-height: 73rpx;

			}

			.right {
				width: 33%;
				height: 73rpx;
				text-align: right;
				margin-right: 30rpx;

				image {
					width: 12rpx;
					height: 34rpx;
					margin-top: 30rpx;
				}
			}
		}

		.shift_one {
			margin-top: 20rpx;
			margin-right: 20rpx;
			min-height: 80rpx;
			display: flex;
			border: 1rpx solid #D3D3D3;
			border-radius: 16rpx;
			margin-left: 20rpx;
			background-color: #fff;

			.left {
				height: 80rpx;
				width: 20%;
				margin: auto 15rpx;
			}

			.right {
				width: 80%;
				height: 80rpx;
				text-align: left;
				color: #989EB8;
				line-height: 80rpx;
				padding-top: 35rpx;
				margin-left: 10rpx;
			}

		}

		.shift_one {
			margin-top: 20rpx;
			margin-right: 20rpx;
			min-height: 100rpx;
			display: flex;

			.left {
				height: 100rpx;
				width: 20%;
				margin: auto 15rpx;

				.inlie {
					height: 60rpx;
					width: auto;
					border-radius: 50rpx;
					background-color: #FF037E;
					color: #FFFFFF;
					font-size: 26rpx;
					line-height: 60rpx;
					margin-top: 20rpx;
				}
			}

			.right {
				min-height: 100rpx;
				width: 80%;
				display: flex;
				flex-wrap: wrap;
				align-content: flex-start;
				padding-bottom: 15rpx;
				border-radius: 16rpx;

				.picker {
					line-height: 100rpx;
					color: #989EB8;
				}
			}
		}

		.addbank {
			height: 100rpx;
			border-radius: 50rpx;
			color: #FFFFFF;
			font-size: 36rpx;
			background-color: #36D28E;
			line-height: 100rpx;
			position: fixed;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto 41rpx 100rpx 40rpx;
		}


	}
</style>
